<template>
  <div>
      <div class="center">
        <el-button type='primary' @click="outerVisible = true">添加规格参数</el-button>
      </div>
      <!-- 弹出层 -->
      <el-dialog
        title='添加规格参数'
        :visible.sync='outerVisible'
        width='80%'
      >
        <el-dialog
          title='添加分组'
          :visible.sync='innerVisible'
          append-to-body
          width='70%'
        >
          <DynaForm 
            :cid='cid'
            @close = 'close'
           />
        </el-dialog>

        <ProductTree @getleimu = 'getName' />
        <el-button type='primary' @click='outerVisible = false'>取消</el-button>
        <el-button type='primary' @click='innerVisible = true'>确定并添加分组</el-button>
      </el-dialog>
      <!-- 列表展示 -->
      <el-table :data="paramsList" style="width: 100%">
        <el-table-column prop="id" label="规格参数ID" width='150'></el-table-column>
        <el-table-column prop="itemCatId" label="分类ID"  show-overflow-tooltip width='150'></el-table-column>
        <el-table-column prop="paramData" label="规格参数结构"  show-overflow-tooltip ></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="small" type="danger"  @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import ProductTree from '../Home/ProductTree'
import DynaForm from './DynaForm'
export default {
  name:'Params',
  data(){
    return{
      curpage:1,
      paramsList:[],
      innerVisible:false,
      outerVisible:false,
      cid:''
    }
  },
  components:{
    ProductTree,
    DynaForm
  },
  methods:{
    // 添加规格参数成功后，关闭对话框，重新请求页面数据
    close(){
      this.outerVisible = false;
      this.innerVisible=false;
      this.getdata(1);
    },
    // 删除
    shanchu(row){
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.getDeleteItemParamById({id:row.id})
          .then(data=>{
            if(data.status==200){
              this.getdata(this.curpage)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    getdata(page){
      this.$api.getSelectItemParamAll({page})
      .then(data=>{
        console.log(data)
        if(data.status == 200){
          this.paramsList = data.data.result
        }
      })
    },
    getName(data){
      this.cid = data.cid
    }
  },
  mounted(){
    this.getdata(this.curpage)
  }
}
</script>

<style scoped>
.center{
  padding:10px 0;
  text-align: center;
}
</style>